
<!--使用params传参数-->


<template>
  <div>
    <ul>
      <li v-for="item in newsList" :key="item.id">
<!--        写法一-->
<!--        <RouterLink :to="`/a/news/${item.id}/${item.title}/${item.content}`">{{item.title}}</RouterLink>-->
<!--       写法二-->
        <RouterLink :to="{
          name:'shijian',   //注意这里params传参只能用name
          params:{
            id:item.id,
            title:item.title,
            content:item.content
          }
        }">{{item.title}} <button @click="gotoRouterUrl(item)">点我去看详情</button></RouterLink>
      </li>
    </ul>
    <RouterView></RouterView>
  </div>
</template>



<script setup lang="ts">
import {onMounted, reactive} from "vue";
import {RouterLink} from "vue-router"
import {useRouter} from "vue-router";
const newsList = reactive([
  {id:1,title:"事件1",content:"新闻1的内容"},
  {id:2,title:"事件2",content:"事件2的内容"},
  {id:3,title:"事件3",content:"事件3的内容"},
  {id:4,title:"事件4",content:"事件4的内容"},
])
interface ShiJian{
  id:number,
  title:string,
  content:string
}
function gotoRouterUrl(item :ShiJian){
  router.push({
    params:{
      id:item.id,
      title:item.title,
      content:item.content
    }
  })
}

const router = useRouter();
onMounted(()=>{
  setTimeout(()=>{
    //倒计时三秒 跳转到c页面
    router.push("/c")
  },3000)
})
</script>